<template>
  <div class="tabs-container">
    <div
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab"
      :class="{ active: index === selectedIndex }"
      @click="selectTab(tab,index)"
    >
      {{ tab.title }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    tabs: {
      type: Array,
      required: true,
      validator: (tabs) => {
        return tabs.every(tab => typeof tab.title === 'string');
      }
    }
  },
  data() {
    return {
      selectedIndex: 0
    };
  },
  methods: {
    selectTab(item,index) {
      if(this.selectedIndex !=index){
        this.selectedIndex = index;
        this.$emit('change',item)
      }

    }
  }
};
</script>

<style scoped lang="scss">
.tabs-container {
  display: inline-block;
  border: 1px solid #ccc; /* 外部边框 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 确保内容不会溢出容器 */
  background-color: var(--v-theme-secondary); /* 背景颜色，确保与标签背景一致 */
}

.tab {
  padding: 8px 12px;
  display: inline-block;
  cursor: pointer;
  background-color: var(--v-theme-secondary); /* 背景颜色，确保与标签背景一致 */
  transition: background-color 0.3s;
  border-right: 1px solid rgba(138, 141, 147, 1); /* 右侧边框，除了最后一个标签 */
  white-space: nowrap;
  text-align: center;
  color: var(--v-thme-secondary);
}

.tab:last-child {
  border-right: none; /* 移除最后一个标签的右侧边框 */
}

.tab.active {
  background-color:rgba(var(--v-theme-primary));
  color: #fff; /* 选中时的文字颜色，确保可读性 */
}

.tab:not(.active):hover {
  background-color: #eee; /* 非选中时悬停的背景颜色 */
}

.tab-content {
  padding: 20px;
  border-top: none; /* 不需要顶部边框，因为已经在 tabs-container 上设置了 */
}
</style>
